import React, { Component } from 'react'
import { nanoid } from 'nanoid';
import { connect } from 'react-redux';
import { addPerson } from '../../redux/actions/person';
class Person extends Component {
  addPerson = () => {
    const name = this.nameNode.value;
    const age = this.ageNode.value;
    const personObj = { id: nanoid(), name, age }
    this.props.addPerson(personObj)
  }
  render() {
    return (
      <div>
        <h1>我是person组件,上方count为{this.props.count}</h1>
        <div>
          <input ref={n => this.nameNode = n} type="text" placeholder="请输入姓名" />
          <input ref={n => this.ageNode = n} type="text" placeholder="请输入年龄" />
          <button onClick={this.addPerson}>添加</button>
        </div>
        <ul>
          {
            this.props.persons.map(e => {
              return <li key={e.id}>{e.name} -- {e.age}</li>
            })
          }
        </ul>
      </div>
    )
  }
}
export default connect(
  state => ({
    count: state.count,
    persons: state.persons
  }), { addPerson })(Person)